<template>
	<view class="uni_box login">
		<navbar title='添加银行卡' backgroundColor='#010101'>
		</navbar>
		<view class="content">
			<u-field
				v-model="bank_no"
				label="卡号"
				placeholder="请填写卡号"
				placeholder-style='#999999'
			>
			</u-field>
			<u-field
				v-model="name"
				label="姓名"
				placeholder="请填写姓名"
				placeholder-style='#999999'
			>
			</u-field>
			<u-field
				v-model="id_number"
				label="身份证号"
				placeholder="银行预留身份证号"
			>
			</u-field>
			
			<u-field
				v-model="phone"
				label="手 机 号"
				placeholder="银行预留手机号"
			>
			</u-field>
			<yunpian type='yinhang' style='margin-top: 50rpx;' @click="handleCaptcha"></yunpian>
			<!-- <view class="duibtn" @click="next">
				下一步
			</view> -->
		</view>
		<PasswordPop pastype='Card' :ispasswordPop="showPasswordPop" @payclose="payclose" @payment='payment'></PasswordPop>
		<!-- <yidunCaptcha ref="captcha" :isSense="false" @verify="handleCaptcha"></yidunCaptcha> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import PasswordPop from '@/components/PasswordPop/PasswordPop';
	export default {
		components: {
		  'PasswordPop': PasswordPop
		},
		data() {
			return {
				bank_no: '',//卡号
				name: '',//姓名
				id_number:'',//身份证号
				phone:'',//手机号
				code:'',//验证码
				showPasswordPop:false
			};
		},
		async onLoad() {
			let {
				data
			} = await this.$u.api.collection();
			console.log(data)
			if(data){
				this.bank_no = data.bank_no
				this.name = data.name
				this.id_number = data.id_number
				this.phone = data.phone
			}
			
		},
		methods:{
			async realnamePost() {
				await this.$u.api.collectionpost({
					nickname: this.nickname
				});
				this.$u.toast("昵称修改成功");
				setTimeout(() => {
					uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
				}, 1000);
			},
			async handleCaptcha(validate) {
				console.log("发送验证码开始")
				this.showPasswordPop = true
				let res = await this.$u.api.smsSend({
					phone: this.phone,
					scene: "collection",
					authenticate:validate.authenticate,
					token:validate.token
				});
				this.$refs.captcha.reset();
			},
			next(){
				let bank_no = this.bank_no;
				let name = this.name;
				let id_number = this.id_number;
				let phone = this.phone;
				if (!bank_no) {
					this.$refs.uToast.show({
						title: "请输入卡号",
						type: "error"
					})
					return
				};
				if (!name) {
					this.$refs.uToast.show({
						title: "请输入姓名",
						type: "error"
					})
					return
				};
				if (!id_number) {
					this.$refs.uToast.show({
						title: "请输入身份证号",
						type: "error"
					})
					return
				};
				if (!phone) {
					this.$refs.uToast.show({
						title: "请输入手机号码",
						type: "error"
					})
					return
				};
				this.$refs.captcha.verify();
				
			},
			payclose(){
				this.showPasswordPop = false
			},
			async payment(e){
				console.log(e)//密码字段
				this.code = e
				await this.$u.api.collectionpost({
					bank_no: this.bank_no,
					name:this.name,
					id_number:this.id_number,
					phone:this.phone,
					code:this.code
				});
				this.$u.toast("成功");
				setTimeout(() => {
					this.showPasswordPop = false
					uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
				}, 1000);
				
			}
		}
	}
</script>

<style scoped lang="scss">
  page{
  	background-color: #010101;
  }
  .content{
	  padding: 30rpx;
	  .duibtn{
	  		  width: 100%;
	  		  height: 88rpx;
	  		  background: linear-gradient(90deg, #9394F3 0%, #82E7CB 54%, #22FC94 100%);
	  		  border-radius: 8rpx;
	  		  opacity: 1;
	  		  display: flex;
	  		  align-items: center;
	  		  justify-content: center;
	  		  font-size: 32rpx;
	  		  font-family: PingFang SC-Bold, PingFang SC;
	  		  font-weight: bold;
	  		  color: #232323;
	  		  margin-top: 70rpx;
	  }
  }
  /deep/ .u-label-text[data-v-6e6996df] {
    display: inline-flex;
	color: #fff;
}
/deep/ .uni-input-input{
	color: #fff;
}
</style>
